<ul>...</ul> para abertura e fechamento da lista. <li>...</li>.Arquivo: index.html
<!--Arquivo index.html-->
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Aula03</title>
<link rel="stylesheet" href="css/estilo.css">
</head>
<body>
<h1> IFSP - Bragança Paulista </h1>
<h2>Lista não ordenada</h2>
<ul>Comprar
<li>Limão.</li>
<li>Manga.</li>
<li>Pêssego.</li>
<li>Maçã.</li>
</ul>
</body>
</html>
Figura 1: Exemplo de uso de lista não ordenada
| Fonte: Autoria própria |
<ol>...</ol> para abertura e fechamento da lista. <li>...</li>.Arquivo: index.html
<!--Arquivo index.html-->
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Aula03</title>
<link rel="stylesheet" href="css/estilo.css">
</head>
<body>
<h1> IFSP - Bragança Paulista </h1>
<h2>Lista ordenada</h2>
<ol>Organizar nesta ordem
<li>Planos de Ensino.</li>
<li>Planos de Aula.</li>
<li>Planos de Atividades.</li>
<li>Diários.</li>
</ol>
</body>
</html>
Figura 2: Exemplo de uso de lista ordenada
| Fonte: Autoria própria |
<dl>...</dl> para abertura e fechamento da lista de definição. <dt>...</dt>. <dd>...</dd>.Arquivo: index.html
<!--Arquivo index.html-->
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Aula03</title>
<link rel="stylesheet" href="css/estilo.css">
</head>
<body>
<h1> IFSP - Bragança Paulista </h1>
<h2>Lista de Definição</h2>
<dl>
<dt>DWEI5</dt>
<dt>Disciplina de Desenvolvimento Web</dt>
<dt>5o. módulo</dt>
<dd>A disciplina aborda os conceitos de linguagem de marcação de hipertexto, formatação de estilos e linguagem de script. </dd>
</dl>
</body>
</html>
Figura 3: Exemplo de uso de lista de definição
| Fonte: Autoria própria |
list-style-type¶type define o estilo de marcador para a lista. ul {
list-style-type: circle;
}
list-style-image¶ul {
list-style-image: url("../../img/elefante.jpg");
}
list-style-position¶ul {
list-style-position: inside;
}
list-style¶list-style: list-style-type list-style-image list-style-position;ul {
list-style: list-style-type list-style-image list-style-position;
}
ul {
list-style: circle url("../../img/elefante.jpg") inside;
}
<table>...</table>: <thead>...</thead>: <th>...</th>, <tr>...</tr> combinadas. <tbody>...</tbody>: <tr>...</tr>, <td>...</td>.<tfoot>...</tfoot>:<tr>...</tr>, <td>...</td> combinadas para indicar informações de rodapé. <tr>...</tr>: <th>...</th>>: <td>...</td>: <caption>...</caption>: <caption> representa o título de uma tabela. <table>, seu estilo, usando CSS pode colocar ele em qualquer lugar relativo a tabela. Exemplos:
<td colspan="5">Fonte: (GIANCOLI, 2020) </td>: une 5 colunas de uma tabela em uma única célula.<td rowspan="5">Ingredientes: </td>: une 5 linhas de uma tabela em uma única célula.<td colspan="5">Fonte: (GIANCOLI, 2020) </td> <!-- Unindo 5 colunas da tabela em uma única célula -->
<td rowspan="5">Ingredientes: </td> <!-- Unindo 5 linhas da tabela em uma única célula -->
Arquivo: index.html
<!--Arquivo index.html-->
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Exemplo Tags Tabelas</title>
<link rel="stylesheet" href="css/estilo.css">
</head>
<body>
<table>
<caption>Tabela 1: Colunas e Linhas</caption> <!--- Legenda da Tabela -->
<thead> <!--- Cabeçalhos da Tabela -->
<tr>
<th>Col-1</th>
<th>Col-2</th>
<th>Col-3</th>
<th>Col-4</th>
<th>Col-5</th>
</tr>
</thead>
<tbody> <!--- Corpo da Tabela -->
<tr>
<td>Célula 1-L1</td>
<td>Célula 2-L1</td>
<td>C3-L1</td>
<td>C4-L1</td>
<td>C5-L1</td>
</tr>
<tr>
<td>C1-L2</td>
<td>C2-L2</td>
<td>C3-L2</td>
<td>C4-L2</td>
<td>C5-L2</td>
</tr>
<tr>
<td>C1-L3</td>
<td>C2-L3</td>
<td>C3-L3</td>
<td>C4-L3</td>
<td>C5-L3</td>
</tr>
<tr>
<td>C1-L4</td>
<td>C2-L4</td>
<td>C3-L4</td>
<td>C4-L4</td>
<td>C5-L4</td>
</tr>
</tbody>
<tfoot> <!--- Rodapé da Tabela -->
<tr>
<td colspan="5">Fonte: (GIANCOLI, 2020) </td>
</tr>
</tfoot>
</table>
</body>
</html>
Figura 4: Exemplo de estrutura de uma tabela
| Fonte: Autoria própria |
text-align.caption-side, podendo ser top, ou bottom. table-layout¶auto: fixed: <table> e <col> ou pela largura da primeira linha de células.table-layout: fixed;<!-- Arquivo index.html -->
<!-- Omitido para facilitar o entendimento -->
<!-- Utilizar a mesma estrutura criada no item 3.3. Exemplo de uma Estrutura de uma tabela -->
/* Arquivo estilo.css */
.tabela {
table-layout: fixed;
width: 500px;
}
Figura 5: Exemplo de uma tabela com a propriedade table-layout: fixed
| Fonte: Autoria própria |
table-layout: auto;<!-- Arquivo index.html -->
<!-- Omitido para facilitar o entendimento -->
<!-- Utilizar a mesma estrutura criada no item 3.3. Exemplo de uma Estrutura de uma tabela -->
/* Arquivo estilo.css */
.tabela {
table-layout: auto;
width: 500px;
}
Figura 6: Exemplo de uma tabela com a propriedade table-layout: auto
| Fonte: Autoria própria |
width¶width: 500px;<!-- Arquivo index.html -->
<!-- Omitido para facilitar o entendimento -->
<!-- Utilizar a mesma estrutura criada no item 3.3. Exemplo de uma Estrutura de uma tabela -->
/* Arquivo estilo.css */
.tabela {
table-layout: auto;
width: 500px;
}
Figura 7: Exemplo de uma tabela com a propriedade width: 500px
| Fonte: Autoria própria |
text-align¶left). text-align: right;.<!-- Arquivo index.html -->
<!-- Omitido para facilitar o entendimento -->
<!-- Utilizar a mesma estrutura criada no item 3.3. Exemplo de uma Estrutura de uma tabela -->
/* Arquivo estilo.css */
.tabela {
table-layout: auto;
width: 500px;
text-align: right;
}
Figura 8: Exemplo de uma tabela com a propriedade text-align: right
| Fonte: Autoria própria |
text-align: center;.<!-- Arquivo index.html -->
<!-- Omitido para facilitar o entendimento -->
<!-- Utilizar a mesma estrutura criada no item 3.3. Exemplo de uma Estrutura de uma tabela -->
/* Arquivo estilo.css */
.tabela {
table-layout: auto;
width: 500px;
text-align: center;
}
Figura 9: Exemplo de uma tabela com a propriedade text-align: center
| Fonte: Autoria própria |
vertical-align¶baseline: sub: super: top: bottom: middle: height: 250px; e em seguida, variamos a propriedade vertical-align com alguns dos valores possíveis.vertical-align: bottom;.<!-- Arquivo index.html -->
<!-- Omitido para facilitar o entendimento -->
<!-- Utilizar a mesma estrutura criada no item 3.3. Exemplo de uma Estrutura de uma tabela -->
/* Arquivo estilo.css */
.tabela {
table-layout: auto;
width: 500px;
height: 250px; /* inserido */
text-align: center;
}
td {
vertical-align: bottom; /* define um valor padrão para todas as linhas */
}
Figura 10: Exemplo de uma tabela com a propriedade vertical-align: bottom
| Fonte: Autoria própria |
vertical-align: top;.<!-- Arquivo index.html -->
<!-- Omitido para facilitar o entendimento -->
<!-- Utilizar a mesma estrutura criada no item 3.3. Exemplo de uma Estrutura de uma tabela -->
/* Arquivo estilo.css */
.tabela {
table-layout: auto;
width: 500px;
height: 250px; /* inserido */
text-align: center;
}
td {
vertical-align: top; /* define um valor padrão para todas as linhas */
}
Figura 11: Exemplo de uma tabela com a propriedade vertical-align: top
| Fonte: Autoria própria |
pseudoclasse :nth-child¶:nth-child(valor).<!-- Arquivo index.html -->
<!-- Omitido para facilitar o entendimento -->
<!-- Utilizar a mesma estrutura criada no item 3.3. Exemplo de uma Estrutura de uma tabela -->
/* Arquivo estilo.css */
.tabela {
table-layout: auto;
width: 500px;
text-align: center;
}
/* inserido */
:nth-child(1) {
text-align: justify;
}
:nth-child(2) {
text-align: right;
}
:nth-child(3) {
text-align: left;
}
:nth-child(4) {
text-align: center;
}
:nth-child(5) {
text-align: left;
}
Figura 12: Exemplo de uma tabela com a propriedade :nth-child(valor)
| Fonte: Autoria própria |
caption-side¶<caption> de uma tabela no lado especificado. caption-side: top; é o valor padrão. caption-side: bottom;. <!-- Arquivo index.html -->
<!-- Omitido para facilitar o entendimento -->
<!-- Utilizar a mesma estrutura criada no item 3.3. Exemplo de uma Estrutura de uma tabela -->
/* Arquivo estilo.css */
.tabela {
table-layout: auto;
width: 500px;
text-align: center;
caption-side: top; /* inserido */
}
Figura 13: Exemplo de uma tabela com a propriedade caption-side: top
| Fonte: Autoria própria |
caption-side: bottom;.<!-- Arquivo index.html -->
<!-- Omitido para facilitar o entendimento -->
<!-- Utilizar a mesma estrutura criada no item 3.3. Exemplo de uma Estrutura de uma tabela -->
/* Arquivo estilo.css */
.tabela {
table-layout: auto;
width: 500px;
text-align: center;
caption-side: bottom; /* inserido */
}
Figura 14: Exemplo de uma tabela com a propriedade caption-side: bottom
| Fonte: Autoria própria |
border-style e border-color¶border-style: none; : border-style: dotted; : border-style: inset; : border-style: dashed solid; : border-style: dashed double none; :border-style: dashed groove none dotted; : border-style, e para escolher a cor da borda, utilizamos a propriedade border-color. vertical-align: middle; , para exibir o texto no centro das células.border-style nas formatações da tabela, exibe externamente a borda da tabela na cor vermelha.border-style nas formatações dos títulos da tabela (th), exibe as bordas das células que tiverem a tag <th> na cor verde (#3e8f3e). border-style nas formatações dos detalhes da tabela (td), exibe as bordas das células que tiverem a tag <td> na cor azul (dodgerblue).border-style: dashed;. <!-- Arquivo index.html -->
<!-- Omitido para facilitar o entendimento -->
<!-- Utilizar a mesma estrutura criada no item 3.3. Exemplo de uma Estrutura de uma tabela -->
/* Arquivo estilo.css */
.tabela {
table-layout: auto;
width: 500px;
height: 250px;
text-align: center;
border-style: dashed; /* inserido */
border-color: red;
}
th {
border-style: dashed; /* inserido */
border-color: #3e8f3e;
}
td {
vertical-align: middle;
border-style: dashed; /* inserido */
border-color: dodgerblue;
}
Figura 15: Exemplo de uma tabela com a propriedade border-style: dashed
| Fonte: Autoria própria |
border-style: solid groove dashed dotted;.<!-- Arquivo index.html -->
<!-- Omitido para facilitar o entendimento -->
<!-- Utilizar a mesma estrutura criada no item 3.3. Exemplo de uma Estrutura de uma tabela -->
/* Arquivo estilo.css */
.tabela {
table-layout: auto;
width: 500px;
height: 250px;
text-align: center;
border-style: solid groove dashed dotted; /* inserido */
border-color: dodgerblue;
}
td {
vertical-align: middle;
border-style: solid; /* inserido */
border-color: gray;
}
Figura 16: Exemplo de uma tabela com a propriedade border-style: solid groove dashed dotted
| Fonte: Autoria própria |
border-collapse¶separate:separate, as células adjacentes possuem suas próprias bordas distintas. border-spacing. collapse: collapse, as células de tabela adjacentes partilham fronteiras. separate: collapse: <!-- Arquivo index.html -->
<!-- Omitido para facilitar o entendimento -->
<!-- Utilizar a mesma estrutura criada no item 3.3. Exemplo de uma Estrutura de uma tabela -->
/* Arquivo estilo.css */
.tabela {
table-layout: auto;
width: 500px;
height: 250px;
text-align: center;
border-style: solid groove dashed dotted;
border-color: dodgerblue;
border-collapse: collapse;
}
td {
vertical-align: middle;
border-style: solid;
border-color: gray;
}
Figura 17: Exemplo de uma tabela com a propriedade border-collapse: collapse
| Fonte: Autoria própria |
border-spacing¶border-collapse é separate. border-spacing: length; border-spacing: horizontal vertical; border-spacing: inherit;border-spacing: 10px;. <!-- Arquivo index.html -->
<!-- Omitido para facilitar o entendimento -->
<!-- Utilizar a mesma estrutura criada no item 3.3. Exemplo de uma Estrutura de uma tabela -->
/* Arquivo estilo.css */
.tabela {
table-layout: auto;
width: 500px;
height: 250px;
text-align: center;
border-style: solid;
border-color: dodgerblue;
border-collapse: separate; /* modificado para separte */
border-spacing: 10px; /* inserido */
}
td {
vertical-align: middle;
border-style: solid;
border-color: gray;
}
Figura 18: Exemplo de uma tabela com a propriedade border-spacing: 10px
| Fonte: Autoria própria |
empty-cells¶show: hide: <!-- Arquivo index.html -->
<html>
<!-- Omitido para facilitar o entendimento -->
<body>
<table class="tabela">
<caption>Tabela 1: Colunas e Linhas</caption>
<thead>
<tr>
<th>Col-1</th>
<th></th> <!-- Conteúdo excluído para exemplificar -->
<th>Col-3</th>
<th>Col-4</th>
<th>Col-5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Célula 1-L1</td>
<td>Célula 2-L1</td>
<td>C3-L1</td>
<td></td> <!-- Conteúdo excluído para exemplificar -->
<td>C5-L1</td>
</tr>
<tr>
<td>C1-L2</td>
<td>C2-L2</td>
<td>C3-L2</td>
<td>C4-L2</td>
<td>C5-L2</td>
</tr>
<tr>
<td>C1-L3</td>
<td></td> <!-- Conteúdo excluído para exemplificar -->
<td>C3-L3</td>
<td>C4-L3</td>
<td>C5-L3</td>
</tr>
<tr>
<td>C1-L4</td>
<td>C2-L4</td>
<td>C3-L4</td>
<td>C4-L4</td>
<td>C5-L4</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5">Fonte: (GIANCOLI, 2020) </td>
</tr>
</tfoot>
</table>
</body>
</html>
/* Arquivo estilo.css */
.tabela {
table-layout: auto;
width: 500px;
height: 250px;
text-align: center;
border-style: solid;
border-color: dodgerblue;
border-collapse: separate;
border-spacing: 10px;
}
td {
vertical-align: middle;
border-style: solid;
border-color: gray;
empty-cells: hide; /* inserido */
}
Figura 19: Exemplo de uma tabela com a propriedade empty-cells: hide
| Fonte: Autoria própria |
rowspan e colspan¶<td rowspan="3">C1-L2</td> e <td colspan="5">Fonte: (GIANCOLI, 2020)</td>. <!-- Arquivo index.html -->
<html>
<!-- Omitido para facilitar o entendimento -->
<body>
<table class="tabela">
<caption>Tabela 1: Colunas e Linhas</caption>
<thead>
<tr>
<th>Col-1</th>
<th>Col-2</th>
<th>Col-3</th>
<th>Col-4</th>
<th>Col-5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Célula 1-L1</td>
<td>Célula 2-L1</td>
<td>C3-L1</td>
<td>C4-L1</td>
<td>C5-L1</td>
</tr>
<tr>
<td rowspan="3">C1-L2</td> <!-- inserido -->
<td>C2-L2</td>
<td>C3-L2</td>
<td>C4-L2</td>
<td>C5-L2</td>
</tr>
<tr>
<!-- Excluído pois a Célula C1-L2 ocupou seu espaço -->
<td>C2-L3</td>
<td>C3-L3</td>
<td>C4-L3</td>
<td>C5-L3</td>
</tr>
<tr>
<!-- Excluído pois a Célula C1-L2 ocupou seu espaço -->
<td>C2-L4</td>
<td>C3-L4</td>
<td>C4-L4</td>
<td>C5-L4</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5">Fonte: (GIANCOLI, 2020) </td> <!-- inserido -->
</tr>
</tfoot>
</table>
</body>
</html>
/* Arquivo estilo.css */
.tabela {
table-layout: auto;
width: 500px;
height: 250px;
text-align: center;
border-style: solid;
border-color: dodgerblue;
border-collapse: separate;
border-spacing: 10px;
}
td {
vertical-align: middle;
border-style: solid;
border-color: gray;
}
Figura 20: Exemplo de uma tabela com a propriedade rowspan="3" e colspan="5"
| Fonte: Autoria própria |
ADS - HTML5, CSS3, JS.
Modelo e formato elaborado pela profa. Ana Paula Müller Giancoli - BSD 2-Clause License. - Julho.2022.